<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>测试栅格布局</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			.c1,
			.c2,
			.c3,
			.c4,
			.c5,
			.c6,
			.c7,
			.c8,
			.c9,
			.c10,
			.c11,
			.c12 {
				float: left;
			}
			
			.c1 {
				width: 8.333%;
			}
			
			.c2 {
				width: 16.666%;
			}
			
			.c3 {
				width: 25.000%;
			}
			
			.c4 {
				width: 33.333%;
			}
			
			.c5 {
				width: 41.666%;
			}
			
			.c6 {
				width: 50.000%;
			}
		</style>
	</head>

	<body>
		<div id="row1">
			<div class="c1">
				test1
			</div>
			<div class="c1">
				test2
			</div>
			<div class="c1">
				test3
			</div>
			<div class="c1">
				test4
			</div>
			<div class="c1">
				test5
			</div>
			<div class="c1">
				test6
			</div>
			<div class="c1">
				test7
			</div>
			<div class="c1">
				test8
			</div>
			<div class="c1">
				test9
			</div>
			<div class="c1">
				test10
			</div>
			<div class="c1">
				test11
			</div>
			<div class="c1">
				test12
			</div>
		</div>
		<div id="row2">
			<div class="c2">
				test1
			</div>
			<div class="c2">
				test2
			</div>
			<div class="c2">
				test3
			</div>
			<div class="c2">
				test4
			</div>
			<div class="c2">
				test5
			</div>
			<div class="c2">
				test6
			</div>
		</div>
		<div id="row3">
			<div class="c3">
				test1
			</div>
			<div class="c3">
				test2
			</div>
			<div class="c3">
				test3
			</div>
			<div class="c3">
				test4
			</div>
			<div class="c2">
				test5
			</div>
			<div class="c2">
				test6
			</div>
		</div>
	</body>

</html>